<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width: 200px;
        }
    </style>
</head>

<body>

    22222
    <h1>我的购物车</h1>
    <ul>
        <!-- <li>
            <h2></h2>
            <input type="button" value="+">
            <input type="text" value="">
            <input type="button" value="-">
            <p></p>

            <img src="" alt="">
            <button>删除</button>

        </li> -->
    </ul>
    <script src="./axios.min.js"></script>
    <script>
        // 请求我的购物车列表
        /* 
            查询用户购物车中的商品 接口

接口地址：http://jx.xuzhixiang.top/ap/api/cart-list.php
接口请求方式：get
接口参数：
     id  用户id
        */
        async function loadCartList() {
            let uid = localStorage.getItem('uid');
            let url = 'http://jx.xuzhixiang.top/ap/api/cart-list.php'
            let params = {
                id: uid //*****
            };
            let res = await axios.get(url, {
                params
            })
            console.log(res);
            //根据数据 渲染购物车列表
            let cartArr = res.data.data;
            let resArr = cartArr.map(pObj => `
                <li>
                    <h2>${pObj.pname}</h2>
                    <input type="button" value="+" onclick="addNumEvent(${pObj.pid},window.event)">
                    <input type="text" value="${pObj.pnum}">
                    <input type="button" value="-" onclick="subNumEvent(${pObj.pid},window.event)">
                    <p>${pObj.pprice}</p>

                    <img src="${pObj.pimg}" alt="">
                    <button onclick="delEvent(${pObj.pid},window.event)">删除</button>

                </li>
            `)
            let list = document.querySelector('ul')
            list.innerHTML = resArr.join('')

        }

        loadCartList()


        // 删除按钮执行的函数
        async function delEvent(pid, evt) {
            console.log(pid, evt);
            let uid = localStorage.getItem('uid');
            // 调用删除接口
            //             删除用户购物车中的商品 接口
            // 接口地址：http://jx.xuzhixiang.top/ap/api/cart-delete.php
            // 接口请求方式：get
            // 接口参数：
            //      uid  用户id
            //      pid  商品id
            let params = {
                uid,
                pid
            }
            let url = 'http://jx.xuzhixiang.top/ap/api/cart-delete.php'
            let res = await axios.get(url, {
                params
            });
            // 删除成功了
            console.log(res);
            // 1- reload  2- loadCartlist 3 - evt。target。parentNode
            evt.target.parentNode.remove()

        }


        /*   
        给加按钮添加事件 - 让输入框的数量加1   发起请求 
        
        更新购物车中商品数量 接口

接口地址：http://jx.xuzhixiang.top/ap/api/cart-update-num.php
接口请求方式：get
接口参数：
     uid  用户id
     pid  商品id
     pnum  要添加的商品数量
        */
        async function addNumEvent(pid, evt) {
            // 让输入框的数量加1   
            let n = parseInt(evt.target.nextElementSibling.value)
            console.log(n);
            n++;
            evt.target.nextElementSibling.value = n;

            // 发起请求
            let url = 'http://jx.xuzhixiang.top/ap/api/cart-update-num.php'
            let uid = localStorage.getItem('uid')
            let params = {
                uid,
                pid,
                pnum: n
            }
            let res = await axios.get(url, {
                params
            })
            console.log(res.data);



        }

        // adfasdf

        async function subNumEvent(pid, evt) {
            // 让输入框的数量加1   
            let n = parseInt(evt.target.previousElementSibling.value)
            console.log(n);
            n--;
            if (n === 0) {
                let r = confirm('是否要删除商品')
                //调用删除接口
                return;
            }
            evt.target.previousElementSibling.value = n;

            // 发起请求
            let url = 'http://jx.xuzhixiang.top/ap/api/cart-update-num.php'
            let uid = localStorage.getItem('uid')
            let params = {
                uid,
                pid,
                pnum: n
            }
            let res = await axios.get(url, {
                params
            })
            console.log(res.data);



        }
    </script>
</body>

</html>